<html>
	<head>
	  <title>ContextFree.js</title>
		<style>
		  textarea {display: none;} #choose{ float:right; } code{ font-weight: bold; }
		  .background{ width: 100%; background-color: #cacaca; position: absolute; left: 0px; padding-top: 5px; border-top: 1px solid #666;}
		  .padding{ padding: 20px; }
	  </style>
		<script src="contextfree.js"></script>
		<script src="jquery.js"></script>		
		
		<script>
    function display( id ){
      // We need to unescape the id because it is coming in via the hash, and
      // URL can have weird encodings (i.e., "%20" instead of " ").
      var theId = unescape(id);
    	document.getElementById("theCode").innerHTML = document.getElementById(theId).value;

    	var t = new Tokenizer();
    	var tokens = t.tokenize( theId );

    	var c = new Compiler();
    	var compiled = c.compile( tokens );
    	
    	if( compiled.background ){
      	var back = compiled.background;
    	  var backcolor = hsl2rgb( back.h|.001, back.sat|.01, back.b|1, back.a|1 );
    	  document.body.style.backgroundColor = backcolor;
    	}

      var canvas = document.createElement( "canvas" );
      var container = $("#canvasContainer");
      canvas.width = container.width();
      canvas.height = container.height();
      canvas.id = "theCanvas";
    
      $(container).find("#theCanvas").remove();
      $(container).append( canvas );

    	var r = Renderer;
    	r.render( compiled, "theCanvas" );
    }
    
    function drawChoice(){
      var toDisplay = $("#menu option:selected" ).text();
      location.assign( "#"+toDisplay );
      location.reload();
    }
    
    function populateMenu( selected ){
      $("textarea").each( function() {
        var option = document.createElement("option");
        $(option)
            .attr( "value", this.id )
            .text( this.id )
        if( this.id == selected ){
          // Using jQuery to do:
          //   $(option).attr("selected","true");
          // causes Safari to die.
          option.selected = true;
        }
        $("#menu").append( option );
      });
    }
		</script>

  </head>

<body>
  <div id="canvasContainer" style="width:1200px;height:1000px;"></div>

<div class="background">
  <div class="padding">
<div id="choose"><code>Choose a program:</code><br/><select id="menu" multiple="multiple"> </select></div>

<input type="button" value="Redraw" onclick="drawChoice();"/> <code>(You can also use Command-R)</code>
<pre>
// The above image is created from the following code (reload the page to see it refresh).
// Everything is done in Javascript, right in the browser! Works in Firefox 3, Safari Beta, and Opera 9.5.
// ContextFree.js by Aza Raskin.
</pre>
<pre id="theCode"></pre>
</div>
</div>

<textarea id="circle">
startshape c

rule c{
  CIRCLE{ s 3 }
  c{ s .5 b .5 r 10 x 1}
}

rule c{
  c { s .5}
  c { s .5 flip 100 }
} 
</textarea>

<textarea id="squares and circles" style="width:400px;height:400px">
startshape scale
background{ b -1 }

rule scale{
  c{ s .8 b 1 }
}

rule c {
	SQUARE{ r 3 }
	CIRCLE{ y 1 s .5 }
	CIRCLE{ x 1 s .5 }
	CIRCLE{ x -1 }	
	SQUARE{ y -3 s 1.2 r 45}
	c { x -2 s .5 r 5 }		
}

rule c .3 {
	CIRCLE{ }
}

rule c .2 {
	c{ rotate -10 s .1}
}


</textarea>

<textarea id="Golden Ratio">
startshape GOLDEN


rule GOLDEN{
 SQUARE{ s 2 1 }
 SQUARE{ s .01 1.803 b 1 r 56.31 x -.25}
 GOLDEN{ s .5 r 90 b .08  x .75}
}

</textarea>  

<textarea id="square fractal" style="width:400px;height:400px">
startshape WHOLE
background{ b -1 }

rule WHOLE {
	QUAD { x -0.5 y -0.5 }
	QUAD { x  0.5 y -0.5 }
	QUAD { x  0.5 y  0.5 }
	QUAD { x -0.5 y  0.5 }
}

rule QUAD {
	SQUARE { s 0.8 b 1}
}
rule QUAD 5 {
	WHOLE { s 0.45 r 2 }
}
rule QUAD 0.5 {
}
</textarea>	

<textarea id="Aza's Fractal" style="width:400px;height:400px">
startshape starter
background{ b -1 }

rule starter{
	center{ b 1 }
}

rule center {
  CIRCLE{ }
  wings {}	
}

rule center {
  SQUARE{ }
  wings { r 3}	
}

rule center {
  TRIANGLE{ }
  wings { r -4}	
}

rule wings {
  center{ x .75 s .5  }	
  center{ x -.75 s .5 }
  center{ y .75 s .5  }	
  center{ y -.75 s .5  }
}

</textarea>

<textarea id="circle fractal" style="width:400px;height:400px">
startshape starter
background{ b -1 }

rule starter{
	center{ b 1 }
}

rule center {
  CIRCLE{ }
  wings {}	
}

rule wings {
  center{ x .75 s .5 b -.2 r 3}	
  center{ x -.75 s .5 b -.2 r -5}
}

rule wings {
  center{ y .75 s .5 b -.2 r 2}	
  center{ y -.75 s .5 b -.2 r -2}
}
</textarea>



<textarea id="triangle fractal" style="width:400px;height:400px">
startshape scale

rule scale{
	fract{ s 2.7 }
}

rule fract {	
	TRIANGLE { }
	fract { y .288 s .5 b 1}
	fract { s .5 r 180 b -1 }
	fract { x -.25 y -.144 s .5 b 1}
	fract { x .25 y -.144 s .5 b 1}
}
rule fract .5 {}
</textarea>

<textarea id="Directions">
  startshape scale
  
  rule scale{ INIT{ s .05} }

  rule INIT {
      CIRCLE {s 2}
      CIRCLE {s 1.8 b 1}
      LINE {}
      LINE { r 120}
      LINE { r -120}
  }

  rule LINE {
      SQUARE{}
      LINE_2 {y 2}
  }

  rule LINE_2 {
      SQUARE{}
      LINE_R {y 2 r 2}
  }

  rule LINE_R {
      SQUARE{}
      LINE_R {y 2 s 0.999 r 2}
  }

  rule LINE_R 0.2 { TRIANGLE{} }

  rule LINE_R 0.06 { ALT {} }

  rule ALT {
      INIT {s 0.8 b 0.2}
  }

  rule ALT {
      TARGET{}
      ALT2{x 2}
  }

  rule ALT2 {
      TARGET{}
      ALT2{x 2}
  }

  rule ALT2 0.5 {
      TARGET{ x 1 s 2 }
  }

  rule TARGET {
      CIRCLE{}
      CIRCLE{s 0.8 b 1}
      CIRCLE{s 0.6}
      CIRCLE{s 0.4 b 1}
      CIRCLE{s 0.2}
  }

</textarea>

<textarea id="Lost Heart (Mouse)">
  startshape lost

  rule lost {
    half { flip 90 x 0.4 b 0.6 }
    half {x -0.4 b 0.6 }
  }
  
  rule MOUSECLICK{ vine { s 0.2 0.2 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r 30 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r 60 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r 90 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r 120 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r 150 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r 180 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r -30 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r -60 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r -90 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r -120 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r -150 } }
  rule MOUSECLICK{ vine { s 0.2 0.2 r -180 } }

  rule half {
    CIRCLE { hue 0 sat 1 }
    half { s 0.959 0.97 x 0.0164 y -0.03 b -0.008 }
  }

  rule vine 15 {
    CIRCLE { s 1 0.4 }
    vine { s 0.96 x 0.4 r 10 z 0.05 b 0.01 }
  }

  rule vine 2 {
    TRIANGLE { s 0.3 1.2 r 40 y -0.3 flip 0 }
    vine { }
  }

  rule vine {
    vine { flip 0 }
  }

</textarea>

<textarea id="snakes">
startshape starter

rule starter{
 snakeparty{ s .5 x -1 y -.5}
}

rule snakeparty {
 snake { }
 snakeparty {y 1.0 s 0.95 r -15}
}

rule snakeeye {
  CIRCLE {b 1}
  CIRCLE {b -1 s 0.4 x -0.35}
}

rule snake {
 snaketail { }
 snakeeye {s 0.4 x -0.2 y 0.2}
 snakemouth {x -0.5 y -0.2 s 0.3}
}

rule snaketail {
 CIRCLE{}
 SQUARE {x 0.32 y 0.1 s 0.5 r -30}
 SQUARE {x 0.32 y -0.1 s 0.5 r 30}
 snaketail {x 0.8 s 0.7}
}

rule snakemouth {
 SQUARE {b 1 r 65}
}

</textarea>


<textarea id="gray dotted tree" style="width:400px;height:400px">
startshape scale

rule scale{
  SEED1 { s .03 y -1}
}
 
rule SEED1 {
 SQUARE{}
 SEED1 {y 1.2 s 0.99 rotate 1.5 brightness 0.03}
}
 
rule SEED1 0.05 {SEED1 {flip 90}}
 
rule SEED1 0.05 {
 SQUARE{}
 SEED1 {y 1.2 s 0.99 r 1.5 b -0.5 flip 90}
 SEED1 {y 1.2 x 1.2 s 0.6 r -60 b -0.5}
 SEED1 {y 1.2 x -1.2 s 0.5 r 60 b -0.5 flip 90}
}
</textarea>



<textarea id="forest">
startshape SCALE

rule SCALE{
	FOREST{ s .04 y -1 x .5 }
}

rule FOREST {
     SEED {}
     SEED {x -20}
     SEED {x -40}
}

rule SEED {BRANCH {}}
rule SEED {BRANCH {rotate 1}}
rule SEED {BRANCH {rotate -1}}
rule SEED {BRANCH {rotate 2}}
rule SEED {BRANCH {rotate -2}}
rule SEED {FORK {}}

rule BRANCH {LEFTBRANCH {flip 90}}
rule BRANCH {LEFTBRANCH {}}

rule LEFTBRANCH 4 {BLOCK {} LEFTBRANCH {y 0.885 rotate 0.1 s 0.99}}
rule LEFTBRANCH 4 {BLOCK {} LEFTBRANCH {y 0.885 rotate 0.2 s 0.99}}
rule LEFTBRANCH {BLOCK {} LEFTBRANCH {y 0.885 rotate 4 s 0.99}}
rule LEFTBRANCH {BLOCK {} FORK {}}


rule BLOCK {
     SQUARE {rotate 1}
     SQUARE {rotate -1}
     SQUARE {}
}

rule FORK {
     BRANCH { }
     BRANCH {s 0.5 rotate 40}
}
rule FORK {
     BRANCH { }
     BRANCH {s 0.5 rotate -40}
}
rule FORK {
     BRANCH {s 0.5 rotate -20}
     BRANCH { }
}
rule FORK {
     BRANCH {s 0.7 y 0.1 rotate 20}
     BRANCH {s 0.7 y 0.1 rotate -20}
}	
</textarea>

<textarea id="mtree">
startshape scale

rule scale{
	PLANT { s .08 y -1.2 }
}

rule PLANT {
	EITHER {x -2}
	EITHER {x 2}
}

rule BOTH {
	BL {rotate 30}
	BL {rotate -30 flip 90}
}

rule EITHER {BL{}}
rule EITHER {BL{flip 90}}

rule BL {
	CIRCLE {}
	WL {s 0.95 y 1.6}
}

rule WL {BL {rotate 3}}
rule WL {BL {rotate 4}}
rule WL {BL {rotate 5}}
rule WL {BL {rotate 6}}
rule WL {BL {rotate 7}}
rule WL {BL {rotate 3}}
rule WL {BL {rotate 4}}
rule WL {BL {rotate 5}}
rule WL {BL {rotate 6}}
rule WL {BL {rotate 7}}
rule WL {BOTH {}}
rule WL {BL {rotate -10 flip 90}}	
</textarea>	

<textarea id="tangle">
startshape scale

rule scale{ 
	SPIKES{ s .03 }
}

rule SPIKES {
	SPIKE {}
	SPIKE { r 90 }
	SPIKE { r 180 }
	SPIKE { r 270 }
}

rule SPIKE {
	LSPIKE {}
}
rule SPIKE {
	LSPIKE { flip 90 }
}

rule LSPIKE {
	SQUARE {}
	LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.005 {
	SPIKE { r 90 }
	SPIKE { r -90 }
	LSPIKE { y 0.98 s 0.99  r 1}
}

</textarea>	

<textarea id="zig zag">
startshape scale

rule scale{
	Trident{ s .08 y -1}
} 

rule Trident {
	Zig { }
	ZagL { x 0 b 0.02 flip 90}	
	ZigL { x 0 b 0.02 }
}

rule Zig {
	Seg { x -0.5 r -45 }
	Zag { y 1 s 0.97 }
}
rule Zag {
	Seg { x 0.5 r 45 }
	Zig { y 1 s 0.97 }
}

rule ZigL {
	Seg { x -0.5 r -45 }
	ZagL { y 1 s 0.97 r 2 }
}
rule ZagL {
	Seg { x 0.5 r 45 }
	ZigL { y 1 s 0.97 r 2 }
}

rule ZigL 0.03 { Trident { } }

rule Seg {
	SQUARE { y 0.6925 s 0.5 1.885 }
}
</textarea>

<textarea id="star">
startshape D

rule D
{
  C {r 15}
  C {r 45}
}

rule C
{
  B {}
  B {f -90}
}

rule B
{
  A {}
  A {r 60}
  A { r 120 }
  A { r 180 }
  A { r 240 }
  A { r 300 }
}

rule A
{
  CIRCLE {s 1 .0006}
  A {x .9 r 120.21 s .99 b .0005 }
}
</textarea>

<textarea id="colored star">
startshape D

rule D
{
  C {r 15}
  C {r 45}
}

rule C
{
  B {}
  B {f -90}
}

rule C
{
  B {f -100}
}

rule B
{
  A {}
  A {r 60 hue 150}
  A { r 120 }
  A { r 180 hue 150}
  A { r 240 }
  A { r 300 hue 150}
}

rule B
{
  A {}
  A {r 60}
  A { r 120 }
  A { r 180 }
  A { r 240 }
  A { r 300 }
}

rule A
{
  CIRCLE {s 1 .0006 b .5 sat .5 a .9}
  A {x .9 r 120.21 s .99 b .0005 h -1}
}

rule A
{
  CIRCLE {s 1 .0006 b .5 sat .5 a .9}
  A {x .9 r 120.21 s .99 b .0005 h 2 }
}
</textarea>

<textarea id="underground">
startshape scale

rule scale{
  MAP{ s .02 }
}

rule MAP {
	LOGO { }
	ROUTE { x 10 y 10 rotate 90 }
}

rule ROUTE {
	LINES { brightness 0.2 }
}
rule ROUTE {
	LINES { brightness -0.2 }
}
rule LINES {
	LINE { }
	LINE { rotate 180 }
}

rule LINE 300 {
	CIRCLE { }
	LINE { y .45  }
}


rule LINE 1 { LINE { rotate 45 } }
rule LINE 1 { LINE { rotate -45 } }
rule LINE 1 { LINE { rotate 90 } }
rule LINE 1 { LINE { rotate -90 } }

rule LINE 4 {
	SQUARE {
		size 3
		rotate 45
	}
	LINE { }
}

rule LINE 0.5 {
	LINE { }
	ROUTE { rotate 90 }
}

rule LINE 1 {
	CIRCLE { size 3 }
	CIRCLE { size 1
		brightness 1 }
}

rule LOGO {
	CIRCLE {
		size 5
		brightness 0.5
	}
	CIRCLE {
		size 3.5
		brightness 1.0
	}
	SQUARE { x -2.5 }
	SQUARE { x -1.5 }
	SQUARE { x -0.5 }
	SQUARE { x  0.5 }
	SQUARE { x  1.5 }
	SQUARE { x  2.5 }
	SQUARE { x -2.0 }
	SQUARE { x -1.0 }
	SQUARE { x  0 }
	SQUARE { x  1.0 }
	SQUARE { x  2.0 }
}
</textarea>

<textarea id="feather boa">
startshape scale
background {b -1}

rule scale{ 
  feather { s .005 }
}

rule feather 50{
	atom {}
	feather { y -.45 r .4 b .0001 hue .3 alpha .1}}

rule feather 50{
	atom {}
	feather { y -.45 r .3 b .0001 hue .3 alpha .1}}

rule feather {
	atom {}
	feather { y -.45 r .3 flip 90 b .0001 hue .3 alpha .1}}

rule feather 0.05 {
	atom {}
	featherB { y -.45 r .3 flip 90 b .0001 hue .3 alpha .1}}

rule featherB 100{
	atom {}
	featherB { s 0.999 y -.45 r .3 b .0001 hue .3 alpha .1}}

rule featherB {
	atom {}
	featherB { s 0.999 y -.45 r .3 flip 90 b .0001 hue .3 alpha .1}}

rule atom {proton{}}
rule atom {electron {}}

rule proton
{
	SEED{}
	proton {y .25 r .25 s .999 b .001 alpha -.001}}

rule proton .015 {electron{}}

rule electron
{
	SEED{}
	electron {y .25 r -.25 s .999 b .001 alpha -.001}}
rule electron .015 {proton{}}

rule SEED {CIRCLE
{alpha -.75 h 120 sat .45 b .5}}
</textarea>

<textarea id="modern art">
startshape scale

rule scale{
  SCENE{ s .1 }
}

rule SCENE {
    BIG { x 8 y 8 }
    BIG { x -8 y 8 }
    BIG { x 8 y -8 }
    BIG { x -8 y -8 }
}

rule BIG {
    START { x 4 y 4  }
    START { x -4 y 4  }
    START { x 4 y -4  }
    START { x -4 y -4  }
}

rule START {
    EIGHT { x 2 y 2}
    EIGHT { x -2 y 2 }
    EIGHT { y -2 x 2}
    EIGHT { y -2 x -2 }
}

rule EIGHT {
    FOUR { x -1 y 1}
    FOUR { x 1 y 1}
    FOUR { x -1 y -1}
    FOUR { x 1 y -1}
}

rule FOUR  {SHAPE { s 2 }}
rule FOUR {
    SHAPE { x -0.5 y 0.5}
    SHAPE { x 0.5  y 0.5}
    SHAPE { x -0.5 y -0.5 }
    SHAPE { x 0.5 y -0.5 }
}

rule SHAPE {CIRCLE { s 0.8 b -1}}
rule SHAPE {
    SQUARE { b -1 }
    CIRCLE { s 0.8 b 1 }
}  
</textarea>

<textarea id="BULB">
startshape scale

rule scale{ BULB{ .5 } }

rule BULB {
    WHEEL { }
    BULB { x .2 r 20 s .99 }
}

rule WHEEL {
    CIRCLE { }
    CIRCLE { s .95 b 1 }
}
</textarea>

<textarea id="i ching">
  startshape scale
  background {h 150 sat .5 b -.5}  
  
  rule scale{ I_CHING{ s .5 x -1} }

  rule I_CHING {
  MONEDA { x 0 }
  MONEDA { x 2 }
  MONEDA { x 4 }
  }

  rule MONEDA {
  CIRCLE{ s 2 }
  CIRCLE {s 1.8 b 1 }
  LINEA { y  0}
  LINEA { y 0.3 }
  LINEA { y -0.3 }
  }

  rule LINEA {
  SQUARE { s 1.3 0.2 }
  }

  rule LINEA {
  SQUARE { s 0.6 0.2 x -0.35}
  SQUARE { s 0.6 0.2 x 0.35}
  }  
</textarea>  

<textarea id="charcoal flower">
  startshape scale
  
  rule scale{ START{ s .1 }}

  rule START { 
      FLOWER { }
      FLOWER { s 0.97 b 1}
      START { s 0.9 r 45 }
  }

  rule FLOWER {
      D_LEAF { }
      D_LEAF { flip 45 }
  }

  rule D_LEAF { 
      FULL_LEAF {}
      FULL_LEAF {  flip 90}
  }

  rule FULL_LEAF {
      LEAF { }
      LEAF { flip 180 }
  }

  rule LEAF {
      SHAPE { s .7 }
      LEAF { s 0.95 y 1 r 3 }
  }

  rule LEAF {
      SHAPE { s .7 }
      LEAF { s 0.9 y 1 r 8 }
  }


  rule SHAPE {SQUARE { alpha -0.5 s 5}}
  rule SHAPE 0.5 {SQUARE { alpha -0.6 s 6}}
  rule SHAPE 0.5 {SQUARE { s 5 2 y -4 r 45 alpha -0.7 }}

</textarea>

<textarea id="cigarettes">
startshape start

rule start{
  lcurve{ s .02 }
}

rule lcurve 40 {
    SQUARE { r -1 }
    lcurve { y 0.9 r 2 }
}

rule lcurve 3 {
    tap { r -90 }
    lcurve { }
}

rule lcurve 1 {
    CIRCLE { y 2 }
}

rule tap 30 {
    SQUARE { }
    tap { y 0.9 }
}

rule tap 2 {
    lcurve { r -90 }
}

rule tap 2 {
    cig { s 2 }
}

rule tap 3 {}

rule cig {
    SQUARE { sat 0 b 0 y 5.1 x 0 s 1.2 10.2 }
    SQUARE { hue 40 sat 0.76 b 0.8 y 1.35 s 1 2.5 }
    SQUARE { sat 0 b 0.9
                y 6.3 s 1 7.4 }
    SQUARE { sat 0 b 0.5
                y 9.7 s 1 0.8 }
}

</textarea>

<textarea id="Vertical Music">
  startshape start
  
  rule start { EDERA { s .006 y 1.2 x -.5 } }

  rule EDERA{
      CIGLIO {x 0}		CIRCLE { x 0 s 5 hue 200 sat 0.5}
      CIGLIO {x 5}		CIRCLE { x 5 s 5 hue 200 sat 0.5}
      CIGLIO {x 10}		CIRCLE { x 10 s 5 hue 200 sat 0.5}
      CIGLIO {x 15}		CIRCLE { x 15 s 5 hue 200 sat 0.5}
      CIGLIO {x 20}		CIRCLE { x 20 s 5 hue 200 sat 0.5}
      CIGLIO {x 25}		CIRCLE { x 25 s 5 hue 200 sat 0.5}
      CIGLIO {x 30}		CIRCLE { x 30 s 5 hue 200 sat 0.5}
      CIGLIO {x 35}		CIRCLE { x 35 s 5 hue 200 sat 0.5}
      CIGLIO {x 40}		CIRCLE { x 40 s 5 hue 200 sat 0.5}
      CIGLIO {x 45}		CIRCLE { x 45 s 5 hue 200 sat 0.5}
  }

  rule CIGLIO 100 {
      SQUARE	{hue 200 sat 0.5}
      CIGLIO		{y -1 s 0.998 b 0.005}
  }

  rule CIGLIO {
      SQUARE	{hue 200 sat 0.5}
      CIRCLE	{hue 200 sat 0.5 alpha -0.4 s 10 y -10 }
      CIGLIO		{y -1 r 1 s 0.998 b 0.005}
  }

  rule CIGLIO 0.0005 {
      SQUARE	{hue 200 sat 0.5}
      CIRCLE	{hue 200 sat 0.5 alpha -0.8 s -20 x 20 y -10 }
      CIGLIO		{y -1  s 0.998 b 0.005 }
  }

  rule CIGLIO {
      SQUARE	{hue 200 sat 0.5}
      CIRCLE	{hue 200 sat 0.5 alpha -0.4 s 5 y -10 }
      FIORE 		{}
   	FIORE		{ x -1 flip 90}
      CIGLIO		{y -1  s 0.998 b 0.005 }
  }

  rule FIORE {
     CIRCLE {hue 200 sat 0.5}
     FIORE {y -1 r 4 s 0.998 b 0.005}
  }

  rule FIORE 0.005 {
     CIRCLE {s 5 hue 200 sat 0.5}
     FIORE {y -1 r 4 s 0.998 b 0.005 flip 90}
  }
</textarea>

<textarea id="Koch Curve">  
startshape scale
background {b -1}

rule scale{ B{s .5} }

rule B
{
 ALine1{x -1 y .577 b .3 a -.5 saturation 1 hue 0 r 0}
 ALine1{x -1 y .577 b .3 a -.5 saturation 1 hue 120 r 120}
 ALine1{x -1 y .577 b .3 a -.5 saturation 1 hue 240 r 240}
}

rule ALine1
{
Line1{}

ALine1 {s .3333 b .3 a .2 sat -.2 hue 20}
ALine1 {s .3333 b .3 a .2 x .666 r 60 sat -.2}
ALine1 {s .3333 b .3 a .2 x 1 y .577 r -60 sat -.2}
ALine1 {s .3333 b .3 a .2 x 1.333 sat -.2 hue -20}
}

rule Line1
{
CIRCLE { x 1 s 1 1}
}
</textarea>

<textarea id="Orbits">
startshape scale

rule scale{
  Planetary_Systems{ s .5 }
}

rule Planetary_Systems {

burbuja{ }

}

rule burbuja 1{

CIRCLE {}
CIRCLE {s 0.9 b 1  }
burbuja{ s 0.3333  x 0 y 0}
burbuja{ s 0.9 r 30 x 1 y 0}
}

rule burbuja 1{
burbuja{ s 0.9 r -30  x -1 y 0}
burbuja{ s 0.6666  x -0.5 y 1 }

}

rule burbuja_fin {
CIRCLE {}
CIRCLE {s 0.9 b 1 hue 49.8 sat 0.7593 b 0.9353 }
}

rule burbuja 0.1 {
CIRCLE{} 
burbuja {s 0.001}
}
rule burbuja 0.8 { burbuja_fin {} }
</textarea>

<textarea id="Japanese Flower">
startshape scale
background {h 50 sat .5 b -.5}

rule scale{ START{ s .02 y -1 }}

rule MOUSECLICK{ START{s .02} }

rule START {
BRANCH { hue 20 sat 0.8 b 0.8 }
BRANCH { flip 90 hue 20 sat 0.8 b 0.8 }
}

rule BRANCH {
SQUARE { }
BRANCH { y 1 s 0.99 r 0.6 }
}

rule BRANCH 0.03 {
BRANCH { flip 90 }
}

rule BRANCH 0.01 {
BRANCH { r 15 s 0.99 }
BRANCH { r -15 s 0.99 }
}

rule BRANCH 0.01 {
FULL_FLOWER { s 0.5 }
}

rule FULL_FLOWER {
FLOWER { hue 10 sat 0.8 b 0.8}
FULL_FLOWER { s 0.7 r 27.8 hue 5 alpha -0.1}
}

rule CURVE_I {
SHAPE { }
CURVE_I { y 1 r 1.5 s 0.99 alpha -0.01}
}

rule CURVE_D {
SHAPE { }
CURVE_D { y 1 r -1.5 s 0.99 alpha -0.01}
}

rule FLOWER {
CURVE_I { }
CURVE_I { r 72 }
CURVE_I { r 144}
CURVE_I { r -72 }
CURVE_I { r -144 }

CURVE_D { }
CURVE_D { r 72 }
CURVE_D { r 144 }
CURVE_D { r -72}
CURVE_D { r -144}
}

rule SHAPE { SQUARE { } }
rule SHAPE 0.01 {
SQUARE { }
CIRCLE { s 2 6 alpha -0.2 }
}

rule SHAPE 0.01 {
SQUARE { }
CURVE_I { s 0.5 }
}
</textarea>

<textarea id="Urban Connection">
  startshape scale
  background { hue 400 sat 0.2 b -1 }

  rule MOUSECLICK{ START{ s .001 } }
  rule MOUSECLICK{ START{ s .005 } }  
  rule MOUSECLICK{ START{ s .01 } }
  rule MOUSECLICK{ START{ s .003 r 5} }

  rule scale{
    START{ s .01 }
  }

  rule START {
      SCENE { h 900 sat 1 b .5 }
      FUXIA {h 400 sat 1 b .5}
      START {y 100 r 90  s 0.29}
  }

  rule FUXIA{
      CIRCLE { s 10 x -10  }
      CIRCLE { x 50 s 5  }
      CIRCLE { x 15 y 15  size 5 }
      FUXIA {y 50 r 88  s 0.59 alpha -0.15}
  }
  rule FUXIA 0.45 {
      FUXIA{flip -50}
      FUXIA {flip -10}
  }
  rule SCENE {
      CIRCLE {  size 20 }
      CIRCLE {  size 30 alpha -0.7 }
      CIRCLE {  size 40 alpha -0.7 }
      FLOW { }
      FLOW { }
      FLOW { flip -50 }
      FLOW { flip -50 }
      FLOW { flip -10 }
      FLOW { flip -10 }
  }
  rule FLOW 0.008 {
      SQUARE { }
      CIRCLE { s 5 alpha -0.7 }
      FLOW { x 1 s 0.995 r 2}
  }
  rule FLOW 0.0001 {
      FLOW { flip 2 }
  }
</textarea>  

<textarea id="Brownian Motion">
startshape STARTER

rule STARTER{
  DOT{ s .5 }  
}

rule DOT{
  CIRCLE{ s 1 b 0 a -.99 }  
  CIRCLE{ s .3 b .5 sat 1 }
  MOTION{ h .1 }
}

rule MOTION{
  DOT{ x .05 }
}

rule MOTION{
  DOT{ x -.05 }
}

rule MOTION{
  DOT{ y .05 }
}

rule MOTION{
  DOT{ y -.05 }
}
</textarea>

<textarea id="Brownian Motion Gray">
startshape STARTER

rule STARTER{
  DOT{}
}

rule DOT{
  CIRCLE{ s 1 b 1 a -.99 }
  CIRCLE{ s .33 b 1 a -.5 }  
  CIRCLE{ s .3 b .5 sat 0 }
  MOTION{ h .2 }
}

rule MOTION{
  DOT{ x .05 }
}

rule MOTION{
  DOT{ x -.05 }
}

rule MOTION{
  DOT{ y .05 }
}

rule MOTION{
  DOT{ y -.05 }
}
</textarea>

<textarea id="Fall">
  startshape scale

  rule scale{
  	FRACT{ s 2 }
  }

  rule FRACT{
  	STAR{}
  	SUBSTAR{}
  	SUBSTAR{ r 60 }
  	SUBSTAR{ r 120 }

  }

  rule SUBSTAR{
  	FRACT{ s .34 b .4 y .385 h 10 sat .7}
  	FRACT{ s .34 b .4 y -.385 h 12 sat 1}
  }

  rule SUBSTAR .3 {}

  rule STAR{
  	TRIANGLE { }
  	TRIANGLE { flip 180 }
  }

  rule fract .5 {}
</textarea>


<textarea id="Star System BTP-73">
  startshape scale
  background { b -1 } 

  rule scale{
    START{ s .006 }
  }

  rule DRAW {
      SHAPE { }
      SHAPE { flip 90 }
      DRAW { y 1 s 0.999 r 1}
  }

  rule DRAW_B {
      SHAPE { }
      SHAPE { flip 90 }
      DRAW_B { y 1 s 0.997 r -1}
  }

  rule DRAW 0.03 {
      DRAW_BALL { }
  }

  rule DRAW 0.03 {
      DRAW_B { }
      DRAW_BALL { }
  }

  rule DRAW_B 0.06 {DRAW { }}
  rule DRAW 0.06 {DRAW_B { }}

  rule SHAPE {
      LINE { }
      SHAPE { x 1 alpha -0.2}
  }

  rule SHAPE 0.1 {}


  rule START {
      DRAW { flip 180 x 10 r 7 hue 70 sat 0.8 b 0.8 }
      DRAW { flip 180 x 13 hue 70 sat 0.8 b 0.8 }
      DRAW { flip 180 x 15 r 15 hue 70 sat 0.8 b 0.8 }
      DRAW { flip 180 x 9 r 15 hue 70 sat 0.8 b 0.8 }
      DRAW_BALL { x 50 hue 70 sat 0.8 b 0.6}
  }


  rule DRAW_BALL {
      SHAPE { }
      SHAPE { flip 90 }
      DRAW_BALL { y 10 s 0.999 r 15 alpha -0.001 b -0.005}
  }

  rule DRAW_BALL {
      DRAW_BALL { alpha -0.5 }
  }

  rule DRAW_BALL {
      DRAW_BALL { alpha 0.5 }
  }

  rule SHAPE {
      LINE { }
      SHAPE { x 1.5 alpha -0.2 r 5}
  }

  rule SHAPE {
      LINE { }
      SHAPE { x 1.5 alpha -0.2 r -5}
  }

  rule SHAPE 0.1 {}


  rule LINE {CIRCLE { s 0.5 20 }}
  rule LINE {CIRCLE { s 0.1 20 }}
  rule LINE {TRIANGLE { s 9 20 hue 20 }}
  rule LINE {CIRCLE { s 0.6 20 }}
  rule LINE {CIRCLE { s 3 20 b 0.6 }}
</textarea>

<textarea id="Mouse">
startshape C

rule C{
  CIRCLE{ s .5 b .5 }
}

rule MOUSECLICK{
  CIRCLE{ s .2 b 0 }
}
</textarea>

<textarea id="Mouse Tangle">
startshape scale

rule MOUSECLICK{
  scale{}
}

rule scale{ 
	SPIKES{ s .03 }
}

rule SPIKES {
	SPIKE { r 90 }
	SPIKE { r 270 }
}

rule SPIKES {
	SPIKE { r }
	SPIKE { r 180 }
}

rule SPIKE {
	LSPIKE {}
}
rule SPIKE {
	LSPIKE { flip 90 }
}

rule LSPIKE {
	SQUARE {}
	LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.002 {
	SPIKE { r 90 }
	SPIKE { r -90 }
}
</textarea>

<textarea id="Mouse Trial">
startshape nothing

rule nothing {}

rule MOUSEMOVE{
  SPIKE{ s .01 r 180}
}

rule MOUSEMOVE{
  SPIKE{ s .01 r 90}
}

rule MOUSEMOVE{
  CIRCLE{ s .1 r 90}
}


rule SPIKE {
	LSPIKE {}
}

rule SPIKE {
	LSPIKE { flip 90 }
}

rule LSPIKE {
	SQUARE {}
	LSPIKE { y 0.98 s 0.97 r 15}
}

</textarea>

<textarea id="Motion Mouse">
startshape nothing

rule nothing{
}

rule DOT{
  CIRCLE{ s 4 b 1 a -.9 }
  CIRCLE{ s .33 b 1 a -.5 }  
  CIRCLE{ s .3 b .5 sat 0 }
}

rule MOUSEMOVE{
  DOT{ }
}
</textarea>

<textarea id="Fireworks Mouse">
startshape nothing

rule nothing{
}

rule MOUSECLICK{
  FRACT{}
}

rule FRACT{
	STAR{}
	SUBSTAR{}
	SUBSTAR{ r 60 }
	SUBSTAR{ r 120 }

}

rule SUBSTAR{
	FRACT{ s .34 b .4 y .385 h 10 sat .7}
	FRACT{ s .34 b .4 y -.385 h 12 sat 1}
}

rule SUBSTAR .3 {}

rule STAR{
	TRIANGLE { }
	TRIANGLE { flip 180 }
}

rule fract .8 {}
</textarea>

<textarea id="Art Net">
  startshape net

  rule net {
      expand { }
      dot { }
      net { x 1 r 90 s 0.71 b 0.5}
      net { x -1 r 90 s 0.71 b -0.5}
  }
  rule net {
      expand { }
      dot { }
      net { x 1 r 90 s 0.71 b -0.5}
      net { x -1 r 90 s 0.71 b 0.5}
  }

  rule expand {
      arm { s 0.1 }
      arm { s 0.1 r 180 }
  }


  rule dot {
      CIRCLE { s 0.4 }
  }
  rule dot 0.7 {
      CIRCLE { s 0.565685424949 }
  }
  rule dot 0.2 {
      CIRCLE { s 0.8 }
  }

  rule arm {
      SQUARE { }
      SQUARE { x 1 }
      SQUARE { x 2 }
      SQUARE { x 3 }
      SQUARE { x 4 }
      SQUARE { x 5 }
      SQUARE { x 6 }
      SQUARE { x 7 }
      SQUARE { x 8 }
      SQUARE { x 9 }
      SQUARE { x 10 }
  }
</textarea>

<textarea id="Chiaroscuro">
background {b -.5}

startshape CHIAROSCURO

rule CHIAROSCURO {
    BLACK {b .5}
}

rule BLACK 60 {
    CIRCLE {s .6}
    BLACK {x .1 r 5 s .99 b -.01 a -.01}
}
rule BLACK {
    WHITE {}
    BLACK {}
}

rule WHITE 60 {
    CIRCLE {s .6}
    WHITE {x .1 r -5 s .99 b .01 a -.01}
}
rule WHITE {
    BLACK {}
    WHITE {}
}
</textarea>

<textarea id="Ancient Map">
startshape scaler

background { b -.1 sat 0.25 hue 44 }

rule scaler{
	ANCIENTMAP{ s .06 }
}

rule ANCIENTMAP {
    WALL1 {b 0.1 hue 34}
    WALL1 {b 0.1 r 180 hue 34}
}

rule WALL1 {
    WALL1{y 0.95 r 1 s 0.975}
}

rule WALL1 {
    SQUARE {}
    WALL1{y 0.95 r -1 s 0.975 sat 0.1 b .01 hue .1}
}

rule WALL1 0.09 {
    SQUARE {}
    WALL1{y 0.95 r 90 s 0.975}
    WALL1{y 0.95 r -90 s 0.975}
}

rule WALL1 0.005 {
    WALL1{y 0.97 r 90 s 1.5}
    WALL1{y 0.97 r -90 s 1.5}
}
</textarea>
<script>
if( location.hash ){ var theId = location.hash.substring(1) }
else{ var theId = "mtree"; }
populateMenu( theId );
display( theId );
$("#menu").change( drawChoice );
</script>

</body>
</html>
